<template>
  <div class="brand-extractor-page">
    <div class="page-header">
      <div class="header-left">
        <h2>品牌提取工具</h2>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="navigateToBrandExtractorPage">
          <el-icon><MagicStick /></el-icon>开始新的提取任务
        </el-button>
      </div>
    </div>

    <div class="page-content">
      <el-card class="intro-card">
        <template #header>
          <div class="card-header">
            <h3>品牌提取工具说明</h3>
          </div>
        </template>
        <div class="intro-content">
          <p>品牌提取工具可以帮助您从商品名称中自动识别和提取品牌信息，主要功能包括：</p>
          <ul>
            <li>批量处理商品名称，自动识别潜在品牌</li>
            <li>区分已知品牌和未知新品牌</li>
            <li>智能评估品牌可信度，减少误判</li>
            <li>支持手动编辑和确认品牌</li>
            <li>将确认的新品牌自动添加到品牌库</li>
          </ul>
          <p>使用步骤：</p>
          <ol>
            <li>点击"开始新的提取任务"按钮</li>
            <li>输入或导入商品名称列表</li>
            <li>配置提取参数并开始提取</li>
            <li>确认并保存识别的新品牌</li>
          </ol>
          <el-divider />
          <div class="action-container">
            <el-button type="primary" size="large" @click="navigateToBrandExtractorPage">
              <el-icon><MagicStick /></el-icon>立即开始提取品牌
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 品牌提取器组件 -->
    <BrandExtractor 
      v-model="brandExtractorVisible"
      @complete="handleBrandExtractorCompleted"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { MagicStick } from '@element-plus/icons-vue'
import BrandExtractor from '@/components/BrandExtractor.vue'
import { getAllBrands } from '@/api/brand'

// 获取路由器实例
const router = useRouter()

// 品牌提取器对话框可见性
const brandExtractorVisible = ref(false)

// 导航到品牌提取器页面
const navigateToBrandExtractorPage = () => {
  router.push('/brand-extractor-tool')
}

// 处理品牌提取完成
const handleBrandExtractorCompleted = async (result) => {
  if (result.success && result.addedCount > 0) {
    ElMessage.success(`成功添加 ${result.addedCount} 个新品牌到系统`)
    
    // 如果添加了新品牌，刷新品牌库
    if (result.needsRefresh) {
      try {
        // 通过调用获取品牌列表API来触发后端刷新品牌库缓存
        await getAllBrands({ page: 1, page_size: 10 })
        console.log('品牌库刷新完成')
      } catch (error) {
        console.error('刷新品牌库失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.brand-extractor-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-content {
  margin-top: 20px;
}

.intro-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intro-content {
  line-height: 1.6;
}

.intro-content ul, .intro-content ol {
  padding-left: 20px;
  margin: 10px 0;
}

.intro-content li {
  margin-bottom: 8px;
}

.action-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style> 